<template>
  <div>
    <zh-form :span="8" ref="formData" :colmun="1" :labelCol="labelColBase"
             :wrapperCol="wrapperColBase" :rules="rules" :model="formData" labelAlign="right">
      <zh-card title="" style="width:100%">
        <zh-row>
          <zh-input
              prop="k0503"
              type="select"
              label="区划"
              :options="dictData.xzqh"
              :defaultFields="{ label: 'dictValue', value: 'dictKey' }"
              v-model="formData.k0503"
              :disabled="disabled"
          ></zh-input>
          <zh-input label="点位名称" show-search :labelInValue="true" :filter-option="false"
                    :not-found-content="fetching ? undefined : null"
                    :defaultFields="{label: 'b0102',value: 'b0101'}" type="select" placeholder="请输入点位名称"
                    v-model="b01"
                    :options="b01DataList"
                    @search="handleSearch"
                    @change="handleChange"
                    :disabled="disabled"
          >
            <a-spin v-if="fetching" slot="notFoundContent" size="small"/>
          </zh-input>
          <zh-input
              prop="orderNum"
              type="number"
              label="排序"
              v-model="formData.orderNum"
              :disabled="disabled"
          ></zh-input>
        </zh-row>
        <div class="operate">
          <div style="width: 10%;">多媒体</div>
          <div style="width: 90%;display: block">
            <div style="text-align: right;width: 100%">
              <ep-button
                  icon="add.svg"
                  size="small"
                  type="primary"
                  @click="addMediaInfo()"
                  :disabled="disabled"
              >添加
              </ep-button>
            </div>
            <div>
              <ul class="media-wrap">
                <li v-for="(item, index) in formData.b02VOList" :key="index">
                  <div class="item special">
                    <div class="desc">序号</div>
                    <p>{{ item.b0207 }}</p>
                  </div>
                  <div class="item">
                    <div class="desc">名称</div>
                    <p>{{ item.b0203 }}</p>
                  </div>
                  <div class="item">
                    <div class="desc">链接</div>
                    <p style="cursor:pointer;color: #00C6FF" @click="clickForLink(item.b0205)">{{ item.b0205 }}</p>
                  </div>
                  <div class="item">
                    <div class="desc">缩略图</div>
                    <template>
                      <img
                          :src="fileShowUrl + item.b0206"
                          @click="checkImg(item.b0206)"
                          alt=""
                      />
                    </template>
                  </div>
                  <div class="item">
                    <div class="desc"></div>
                    <div class="btn-wrap">
                      <ep-button
                          size="small"
                          icon="edit.svg"
                          :disabled="disabled"
                          @click="editMediaInfo(item,index,b02Index)"
                      >编辑
                      </ep-button>

                      <ep-button
                          size="small"
                          type="danger"
                          icon="del.svg"
                          :disabled="disabled"
                          @click="deleteMediaInfo(index,b02Index)"
                          style="margin-left: 15px"
                      >删除
                      </ep-button>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <a-modal
            :title="modalTitle"
            centered
            style="top: 20px"
            width="50%"
            destroyOnClose
            v-model="visible"
            cancelText="关闭"
            okText="保存"
            @ok="handleForm"
        >
      <activate-roaming-media-info-item ref="activateMedia"/>
        </a-modal>
      </zh-card>
    </zh-form>
  </div>
</template>

<script>


import modal from "ant-design-vue/lib/modal";
import {fileDownloadUrl, fileShowUrl, getBatchDict} from "@/services/system/api";
import {getB01DataList,getActivateRoamingDetails} from "@/services/system/whdngxlApi";
import ActivateRoamingMediaInfoItem from "@/pages/whdn/activateRoaming/form/ActivateRoamingMediaInfoItem";
let timeout;
 let   currentValue;
export default {
  name: "ActivateRoamingForm",
  components: {
    ActivateRoamingMediaInfoItem
  },
  props:{
  },
  data() {
    return {
      labelColBase: {
        xs: {span: 24},
        sm: {span: 8},
      },
      wrapperColBase: {
        xs: {span: 24},
        sm: {span: 16},
      },
      modalTitle:'',
      dictData: {},
      fetching: false,
      b01DataList: [],
      b01: undefined,
      disabled: false,
      visible:false,
      b02Index:-1,
      b02VOList:[],
      b0207Num: 0,
      fileShowUrl: fileShowUrl, //预览接口地址
      formData: {
        k0501: '',
        k0502:'',
        b0101:'',
        b0102:'',
        k0503:'',//区划
        orderNum:0,
        b02VOList: [],
        b02VOListDel:[],
        b02VOListEdit:[],
      },
      b02VOListDel:[],
      b02VOListEdit:[],
      labelCol: {
        xs: {span: 24},
        sm: {span: 8},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      rules: {},
    };
  },
  created() {
    const params = {};
    params.dictFields = "xzqh";
    this.$http.post(getBatchDict, params).then((res) => {
      this.dictData = res.result;
    });
  },
  methods: {
    clickForLink(url){
      window.open(url,'_blank')
    },
    fetch(value, callback) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      currentValue = value;
      function fake(that) {
        that.fetching = true
        if (value) {
          that.$http.post(getB01DataList, {b0102: value, b0122: that.formData.k0503}).then(res => {
            console.log(res)
            callback(res.result);
          }).catch((error) => {
            console.log(JSON.stringify(error))
          }).finally(() => {
            that.fetching = false
          })
        }
      }

      timeout = setTimeout(fake(this), 300);
    },
    handleSearch(value) {
      this.fetch(value, data => (this.b01DataList = data));
    },
    handleChange(option) {
      console.log(option);
      this.b01 = option
    },
    init(row,operate){
      this.disabled = operate
      const parms={};
      parms.k0501=row.k0501
      this.$http.post(getActivateRoamingDetails, parms).then((res) => {
        console.log(res)
        this.b01DataList = [{b0101: res.result.b0101, b0102:res.result.b0102}]
        this.b01 = {key: res.result.b0101, label: res.result.b0102}
        this.formData = res.result
      });

    },
    getData(){
      this.formData.b0101=this.b01.key
      this.formData.b0102=this.b01.label
      this.formData.b02VOListDel=this.b02VOListDel
      this.formData.b02VOListEdit=this.b02VOListEdit
      console.log(this.formData)
      return this.formData
    },
    getListSize(list) {
      this.b0207Num = 0;
      list.forEach((item) => {
        if (item.b0207 > this.b0207Num) {
          this.b0207Num = item.b0207;
        }
      });
      if (this.b0207Num < list.length) {
        this.b0207Num = list.length-1;
      }
      this.b0207Num++;
    },
    //新增
    addMediaInfo(index) {
      this.modalTitle = "新增";
      this.visible = true;
      this.b02Index = index
      this.$nextTick(() => {
        this.$refs.activateMedia.editFlag = this.editFlag;
        this.getListSize(this.formData.b02VOList);
        this.$refs.activateMedia.b0207Num = this.b0207Num;
        this.$refs.activateMedia.init(null);
      });
    },
    //编辑
    editMediaInfo(row,index,b02Index) {
      this.modalTitle = "编辑";
      this.editIndex = index;
      this.b02Index = b02Index;
      this.visible = true;
      this.$nextTick(() => {
        this.b02Index = b02Index;
        this.$refs.activateMedia.editFlag = this.editFlag;
        if (row.k0501) {
          row.flag = "edit";
        }
        this.$refs.activateMedia.init(row);
      });
    },
    //确定
    handleForm() {
      var activateMedia = this.$refs.activateMedia.mediaInfoItem;
      if (this.modalTitle === "新增") {
        activateMedia.flag = "save";
        this.formData.b02VOList.push(activateMedia);
        console.log(this.formData.b02VOList)
      } else {
        this.formData.b02VOList.splice(this.editIndex, 1, activateMedia);
      }
      this.$nextTick(() => {
        this.visible = false;
      });},
    deleteMediaInfo(index, b02Index) {
      modal.confirm({
        title: "确认删除吗？",
        onOk: () => {
          if ( this.formData.b02VOList[index].b0201) {
            const item = JSON.parse(JSON.stringify(this.formData.b02VOList[index]));
            item.flag = "delete";
            this.b02VOListDel.push(item);
          }
          this.formData.b02VOList.splice(index, 1);
        },
        onCancel: () => {},
      });
    },
    checkImg(showId) {
      let url = this.fileShowUrl + showId;
      window.open(url, "_blank");
    },
  },
}

</script>

<style lang="less" scoped>
.title {
  display: flex;
  line-height: 32px;
  padding: 5px 0px;

  p {
    flex: 0 0 auto;
    color: #2466d0;
    font-weight: bold;
    font-size: 15px;
  }
  span {
    flex: 0 0 auto;
    margin-left: 8px;
    color: red;
  }
}
.operate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 10px;


  > div {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }


}
.media-wrap {
  margin-top: 15px;
  li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 15px;
    .item {
      flex: 0 0 auto;
      width: 18%;
      .desc {
        width: 100%;
        height: 21px;
        line-height: 21px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      p {
        width: 100%;
        height: 32px;
        line-height: 30px;
        padding: 0 10px;
        border: 1px solid #3e9fc8;
        border-radius: 4px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .btn-wrap {
        text-align: center;
      }
      img {
        width: auto;
        height: 90px;
        max-width: 98%;
        vertical-align: middle;
        cursor: pointer;
      }
      &.special {
        width: 5%;
      }
    }
  }
}
</style>